<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <div>
            <!-- 在使用表单验证时，需要注意：
            1.必须给表单对象绑定一个对象：:model="loginForm"，而且不能写成：v-model="loginForm"
            2.所有的子控件的绑定对象必须是表单对象的内部对象，比如：v-model="loginForm.username"，否则总是验证失败
            -->
            <el-form class="login-container"
                     :model="loginForm"
                     ref="loginForm"
                     :rules="rules"
                     label-position="left">
                <h3 class="login-title">系统登录</h3>
                <el-form-item prop="username">
                    <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item prop="repassword">
                    <el-input type="password" v-model="loginForm.repassword" auto-complete="off" placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input type="text" v-model="loginForm.phone" auto-complete="off" placeholder="手机号"></el-input>
                </el-form-item>
                <el-checkbox class="login-remember" v-model="checked">记住密码</el-checkbox>
                <el-form-item>
                    <el-button class="login-button" type="primary" @click="submitForm('loginForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
</div>
</body>
</html>
{{--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--}}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/validate.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            var username = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入用户名"));
                } else if (!validUsername(value)) {
                    callback(
                        new Error(
                            "用户名为2~5位的汉字"
                        )
                    );
                }else{
                    callback();
                }
            };

            var password = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else if (!validPass(value)) {
                    callback(
                        new Error("密码以字母开头，长度在6~16之间的包含字母、数字和下划线")
                    );
                }else{
                    callback();
                }
            };

            var repassword = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入确认密码"));
                } else if (value !== this.loginForm.password) {
                    callback(new Error("两次输入密码不一致！"));
                }else{
                    callback();
                }
            };

            var phone = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入手机号码"));
                } else if (!validPhone(value)) {
                    callback(new Error("请填写正确的手机号码"));
                }else{
                    callback();
                }
            };

            return {
                rules: {
                    username: [{
                        required: true,
                        validator: username,
                        trigger: "blur"
                    }],
                    password: [{
                        required: true,
                        validator: password,
                        trigger: "blur"
                    }],
                    repassword: [{
                        required: true,
                        validator: repassword,
                        trigger: "blur"
                    }],
                    phone: [{
                        required: true,
                        validator: phone,
                        trigger: 'blur'
                    }]
                },
                loginForm: {
                    username : "",
                    password : "",
                    repassword: "",
                    phone:    "",
                },
                checked: true
            };
        },

        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!')
                    }
                });
            }
        }
    })
</script>
<style lang="stylus" scoped>
    .login-container{
         width :350px;
         margin: 130px auto;
         background-clip: padding-box;
         padding: 35px 35px 15px 35px;
         border: 1px solid #eaeaea;
         border-radius: 15px;
         box-shadow: 0 0 25px #cac6c6;
         background: #fff;
    }
    .login-title{
         margin: 0 auto 40px auto;
         text-align: center;
         color: #505458;
    }
    .login-remember{
        margin: 0 0 35px 0;
        text-align: center;
    }

    .login-button{
        width: 100%;
    }
</style>
